<!--涉砂信访-->
<template>
<div class="page-box">
    <el-radio-group v-model="readStatus" size="medium" class="mb20">
		<el-radio-button label="未读信访">未读信访</el-radio-button>
		<el-radio-button label="已读信访">已读信访</el-radio-button>
    </el-radio-group>
    <div class="search-box">
        <el-form :inline="true" :model="searchForm" size="medium">
            <el-form-item label="">
                <el-input v-model="searchForm.keyword" placeholder="关键字搜索"></el-input>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                    v-model="searchForm.timeRange"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="table-box">
        <el-table
            :data="tableData"
            border
            size="medium"
            height="calc(100vh - 370px)"
            style="width: 100%">
            <el-table-column align="center" label="序号" type="index"  width="60"></el-table-column>
            <el-table-column align="center" label="举报类容" prop="content" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="举报时间" prop="time" width="180"></el-table-column>
            <el-table-column align="center" label="地点" prop="address" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="联系电话" prop="phone" width="120"></el-table-column>
			<el-table-column align="center" label="状态" prop="status" width="120" v-if="readStatus=='已读信访'"></el-table-column>
            <el-table-column align="center" label="操作" width="120">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)" v-if="readStatus=='未读信访'">督办</el-button>
					<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)" v-if="readStatus=='已读信访'">查看进度</el-button>
                    <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :current-page="pageNo"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            readStatus:'未读信访',
            searchForm:{
                keyword:'',
                timeRange:[]
            },
            tableData:[
				{ content: '有非法船只采砂', time: '2020-08-18 16:26:26', address: '孝昌县邹岗镇', phone: '13259865862',status: '已办结' },
				{ content: '有非法船只采砂', time: '2020-08-18 16:26:26', address: '孝昌县邹岗镇', phone: '13259865862',status: '已评价' },
				{ content: '有非法船只采砂', time: '2020-08-18 16:26:26', address: '孝昌县邹岗镇', phone: '13259865862',status: '处理中' },
				{ content: '有非法船只采砂', time: '2020-08-18 16:26:26', address: '孝昌县邹岗镇', phone: '13259865862',status: '核实中' },
                { content: '有非法船只采砂', time: '2020-08-18 16:26:26', address: '孝昌县邹岗镇', phone: '13259865862',status: '已接收' }
            ],
            pageSize:10,
            pageNo:1,
            total:16
        }
    },
    created(){},
    methods: {
        // 表格数据操作
        handleEdit(index,val){},
        handleDelete(index,val){
            console.log(val)
            this.$confirm('已选项目【'+val.projectName+'】, 是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message.success('删除成功!');
            }).catch(() => {});
        },
        // 分页操作
        handleSizeChange(val){
            this.pageSize=val;
        },
        handleCurrentChange(val){
            this.pageNo=val;
        }
    }
}
</script>
<style lang="scss" scoped>
.page-box{
    height: 100%;
    overflow: hidden;
}
</style>